<template>
  <div class="new_phone_part border-box">
    <div class="new_phone_part_body" :style="new_phone_part_body_style">
      <div class="new_phone_title" v-show="partListCon.title" :style="new_phone_title_style">
        <p>
          {{ partListCon.title }}
          <span>{{ partListCon.title_en }}</span>
        </p>
      </div>
      <div class="new_phone_part_content" v-if="partListCon.style == 0">
        <div class="new_phone_part_one_img" v-for="(item, i) in partListCon.banner" :key="i" :style="partListCon.text == 1 ? 'padding-bottom:0px;' : ''">
          <img :src="$fnc.getImgUrl(item.piclink + '?' + new Date().getTime())" crossOrigin="anonymous" alt :style="
              partListCon.text == 1 ? 'border-radius: 0;height: 100%;' : ''
            " />
        </div>
      </div>
      <div class="new_phone_part_content" v-else-if="partListCon.style == 1">
        <div class="new_phone_part_two_img" v-for="(item, i) in partListCon.banner" :key="i" :style="partListCon.text == 1 ? 'padding: 0;width: 50%;' : ''">
          <img :src="$fnc.getImgUrl(item.piclink + '?' + new Date().getTime())" crossOrigin="anonymous" alt :style="
              partListCon.text == 1 ? 'border-radius: 0;height: 100%;' : ''
            " />
        </div>
      </div>
      <div class="new_phone_part_content" v-else-if="partListCon.style == 2">
        <div class="new_phone_part_three_img" v-for="(item, i) in partListCon.banner" :key="i" :style="partListCon.text == 1 ? 'padding: 0;width: 33.33%;' : ''">
          <img :src="$fnc.getImgUrl(item.piclink + '?' + new Date().getTime())" crossOrigin="anonymous" alt :style="
              partListCon.text == 1 ? 'border-radius: 0;height: 100%;' : ''
            " />
        </div>
      </div>

      <div class="new_phone_part_content" v-else-if="partListCon.style == 3">
        <div class="new_phone_part_four_img" v-for="(item, i) in partListCon.banner" :key="i" :class="partListCon.text == 1 ? 'new_phone_part_four_img1' : ''">
          <img :src="$fnc.getImgUrl(item.piclink + '?' + new Date().getTime())" crossOrigin="anonymous" alt :style="
              partListCon.text == 1 ? 'border-radius: 0;height: 100%;' : ''
            " />
        </div>
      </div>
      <div class="new_phone_part_content" v-else-if="partListCon.style == 4">
        <div class="new_phone_part_five_img" v-for="(item, i) in partListCon.banner" :key="i" :class="partListCon.text == 1 ? 'new_phone_part_five_img1' : ''">
          <img :src="$fnc.getImgUrl(item.piclink + '?' + new Date().getTime())" crossOrigin="anonymous" alt :style="
              partListCon.text == 1 ? 'border-radius: 0;height: 100%;' : ''
            " />
        </div>
      </div>
      <div class="new_phone_part_content" v-else-if="partListCon.style == 5">
        <div class="new_phone_part_six_img" v-for="(item, i) in partListCon.banner" :key="i" :class="partListCon.text == 1 ? 'new_phone_part_six_img1' : ''">
          <img :src="$fnc.getImgUrl(item.piclink + '?' + new Date().getTime())" crossOrigin="anonymous" alt :style="
              partListCon.text == 1 ? 'border-radius: 0;height: 100%;' : ''
            " />
        </div>
      </div>
      <div class="new_phone_part_content" v-else-if="partListCon.style == 6">
        <div class="new_phone_part_six1_img" v-for="(item, i) in partListCon.banner" :key="i" :style="partListCon.text == 1 ? 'padding: 0;width: 25%;' : ''">
          <img :src="$fnc.getImgUrl(item.piclink + '?' + new Date().getTime())" crossOrigin="anonymous" alt :style="
              partListCon.text == 1 ? 'border-radius: 0;height: 100%;' : ''
            " />
        </div>
      </div>

      <div class="new_phone_part_content" v-else-if="partListCon.style == 7">
        <el-carousel indicator-position="none" style="width: 100%" :height="bannerHeight + 'px'">
          <el-carousel-item v-for="(item, i) in partListCon.banner" :key="i">
            <img :src="$fnc.getImgUrl(item.piclink)" alt ref="image" @load="imageload" crossOrigin="anonymous" :style="partListCon.text == 1 ? 'border-radius: 0;' : ''" />
          </el-carousel-item>
        </el-carousel>
      </div>

      <div class="new_phone_part_content" v-else-if="partListCon.style == 8">
        <div class="" :class="[
            partListCon.text == 1
              ? 'new_phone_part_eight_img_no_border'
              : 'new_phone_part_eight_img',
          ]" v-for="(item, i) in partListCon.banner" :key="i">
          <img :src="$fnc.getImgUrl(item.piclink + '?' + new Date().getTime())" crossOrigin="anonymous" alt :style="partListCon.text == 1 ? 'border-radius: 0;' : ''" />
        </div>
      </div>

      <div class="new_phone_part_content" v-else-if="partListCon.style == 9">
        <div class="" :class="[
            partListCon.text == 1
              ? 'new_phone_part_nine_img_no_border'
              : 'new_phone_part_nine_img',
          ]" v-for="(item, i) in partListCon.banner" :key="i">
          <img :src="$fnc.getImgUrl(item.piclink + '?' + new Date().getTime())" crossOrigin="anonymous" alt :style="partListCon.text == 1 ? 'border-radius: 0;' : ''" />
        </div>
      </div>

      <div class="new_phone_part_content" v-else-if="partListCon.style == 10">
        <div class="fx" :class="[
            partListCon.text == 1
              ? 'new_phone_part_ten_img_no_border'
              : 'new_phone_part_ten_img',
          ]" v-for="(item, i) in newList" :key="i">
          <img width="160px" v-if="item[0]" :src="$fnc.getImgUrl(item[0].piclink + '?' + new Date().getTime())" crossOrigin="anonymous" alt :style="partListCon.text == 1 ? 'border-radius: 0;' : ''" />
          <div v-if="item[1] || item[2]" class="fx">
            <img width="160px" v-if="item[1]" :src="
                $fnc.getImgUrl(item[1].piclink + '?' + new Date().getTime())
              " crossOrigin="anonymous" alt :style="partListCon.text == 1 ? 'border-radius: 0;' : ''" />
            <img width="160px" v-if="item[2]" :src="
                $fnc.getImgUrl(item[2].piclink + '?' + new Date().getTime())
              " crossOrigin="anonymous" alt :style="partListCon.text == 1 ? 'border-radius: 0;' : ''" />
          </div>
        </div>
      </div>
      <div class="new_phone_part_content" v-else-if="partListCon.style == 11">
        <div class="new_phone_part_11_bj">
          <img :src="$fnc.getImgUrl(partListCon.other + '?' + new Date().getTime())" alt="" crossOrigin="anonymous">
        </div>
        <div class="new_phone_part_11_content" :style="{padding:partListCon.text == 1 ? '0px':'13px 10px'}">
          <div class="new_phone_part_11_item" v-for="(item, i) in partListCon.banner" :key="i">
            <img :src="$fnc.getImgUrl(item.piclink + '?' + new Date().getTime())" crossOrigin="anonymous" alt />
            <span v-if="item.title">{{item.title}}</span>
          </div>
        </div>
      </div>
      <div class="new_phone_part_content" v-else-if="partListCon.style == 99">
        <div class="fx" :class="[
            partListCon.text == 1
              ? 'new_phone_part_99_img_no_border'
              : 'new_phone_part_99_img',
          ]" v-for="(item, i) in newList" :key="i">
          <div v-for="(it, s) in item" :key="s" class="fx">
            <img :src="
                $fnc.getImgUrl(it.piclink + '?' + new Date().getTime())
              " crossOrigin="anonymous" alt :style="partListCon.text == 1 ? 'border-radius: 0;' : ''" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      bannerHeight: "",
      //style 0 - 单行单图   1- 单行双图  2- 单行三图   6- 单行四图  3- 1+2模式   4- 1+3模式   5- 2+3模式  8 1+2+2模式
      //style slide  - 轮播图
      // banner:   "广告"
      // group:    "拼团"
      // knowledge:"知识付费"
      // nav:      "导航"
      // news:     "资讯"
      // presale:  "预售商品"
      // product:  "商品"
      // slides:   "幻灯片"
      // spike:    "秒杀商品"
      // supplier: "商户列表"
      // text:     "文本"
      // tour:     "旅游商品"
    };
  },
  props: {
    index: {
      type: Number,
      default: -1,
    },
  },
  components: {},
  computed: {
    ...mapState({
      active: (state) => state.modulePage.active,
      bannerNowIndex: (state) => state.modulePage.bannerNowIndex || 0,
      allbanner: (state) => state.modulePage.allbanner,
      partListCon() {
        if (this.index >= 0) {
          return this.allbanner[this.index];
        } else {
          return {};
        }
      },
    }),
    newList() {
      var news = [];
      if (this.partListCon.style == 10) {
        let banner = this.partListCon.banner;
        for (var i = 0; i < banner.length; i += 3) {
          news.push(banner.slice(i, i + 3));
        }
      } else if (this.partListCon.style == 99) {
        let banner = this.partListCon.banner;
        for (var i = 0; i < banner.length; i += 2) {
          news.push(banner.slice(i, i + 2));
        }
      }
      console.log(news);
      return news;
    },
    new_phone_part_body_style() {
      let styleObj = {};
      if (this.partListCon.title || this.partListCon.text == 1) {
        styleObj.paddingTop = "0px";
      } else {
        styleObj.paddingTop = "10px";
      }
      if (this.partListCon.text == 1) {
        styleObj.paddingLeft = "0px";
        styleObj.paddingRight = "0px";
      } else {
        styleObj.paddingLeft = "10px";
        styleObj.paddingRight = "10px";
      }

      if (this.partListCon.style == 11) {
        styleObj = {
          width: "100%",
          paddingLeft: "0px",
          paddingRight: "0px",
          backgroundColor: "transparent",
          borderRadius: "0",
        };
      }
      return styleObj;
    },
    new_phone_title_style() {
      let styleObj = {};
      if (this.partListCon.text == 1) {
        styleObj.paddingLeft = "10px";
      } else {
        styleObj.paddingLeft = "0px";
      }
      if (this.partListCon.title || this.partListCon.text == 1) {
        styleObj.paddingTop = "10px";
      } else {
        styleObj.paddingTop = "0px";
      }
      return styleObj;
    },
  },
  created() {},
  mounted() {},
  methods: {
    getImg(url) {
      if (url == "" || url == undefined) {
        return require("./../../../../assets/img/home/noimg.png");
      }
      if (url.indexOf("blob") >= 0) {
        return url;
      }

      if (url.indexOf("assets") >= 0) {
        return url;
      } else if (url.indexOf("data") >= 0) {
        return url;
      } else if (url.indexOf("api") >= 0 || url.indexOf("http") >= 0) {
        return url;
      } else {
        return "/api/" + url;
      }
    },
    imageload() {
      this.bannerHeight = this.$refs.image[0].height;
    },
  },
};
</script>

<style scoped lang="less">
.new_phone_part {
  width: 100%;
  // min-height: 200px;
  // min-height: 100px;
  background-color: whtransparentite;
  margin: 10px 0;
  position: relative;
}
.new_phone_part_body {
  width: 94%;
  margin: 0 auto;
  background-color: white;
  border-radius: 8px;
  padding: 0 10px;
}

.new_phone_title {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-partlistcon: center;
}
.new_phone_title p {
  font-size: 20px;
  color: #2f2f2f;
  font-weight: bold;
  padding: 5px 0;
}
.new_phone_title span {
  font-size: 14px;
  color: #d4d4d4;
  font-weight: 400;
}
.new_phone_part_content {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-partlistcon: center;
}
.new_phone_part_one_img {
  width: 100%;
  padding-bottom: 10px;
}
.new_phone_part_one_img a {
  display: block;
}
.new_phone_part_one_img img {
  width: 100%;
  border-radius: 8px;
  display: block;
}
.new_phone_part_two_content {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-partlistcon: center;
}

.new_phone_part_two_img {
  width: 48%;
  padding: 5px 0;
}
.new_phone_part_two_img img {
  width: 100%;
  border-radius: 8px;
}
.new_phone_part_three_content {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-partlistcon: center;
}
.new_phone_part_three_img {
  width: 32%;
  padding: 5px 0;
}
.new_phone_part_three_img img {
  width: 100%;
  border-radius: 8px;
}
.new_phone_part_six1_img {
  width: 24%;
  padding: 5px 0;
}
.new_phone_part_six1_img img {
  width: 100%;
  border-radius: 8px;
}
.new_phone_part_four_img:nth-of-type(3n + 1),
.new_phone_part_five_img:nth-of-type(3n + 1) {
  width: 100%;
  border-radius: 8px;
  padding: 5px 0;
}

.new_phone_part_four_img:nth-of-type(3n + 2),
.new_phone_part_four_img:nth-of-type(3n + 3) {
  width: 48%;
  border-radius: 8px;
  padding: 5px 0;
}
.new_phone_part_four_img img {
  width: 100%;
  border-radius: 8px;
}
// 1+3
.new_phone_part_five_img:nth-of-type(4n + 1) {
  width: 100%;
  border-radius: 8px;
  padding: 5px 0;
}
.new_phone_part_five_img:nth-of-type(4n + 2),
.new_phone_part_five_img:nth-of-type(4n + 3),
.new_phone_part_five_img:nth-of-type(4n + 4) {
  width: 32%;
  border-radius: 8px;
  padding: 5px 0;
}
.new_phone_part_five_img img {
  width: 100%;
  border-radius: 8px;
  display: block;
}

// 2+3 new_phone_part_six_img

.new_phone_part_six_img:nth-of-type(5n + 1),
.new_phone_part_six_img:nth-of-type(5n + 2) {
  width: 48%;
  border-radius: 8px;
  padding: 5px 0;
}
.new_phone_part_six_img:nth-of-type(5n + 3),
.new_phone_part_six_img:nth-of-type(5n + 4),
.new_phone_part_six_img:nth-of-type(5n + 5) {
  width: 32%;
  border-radius: 8px;
  padding: 5px 0;
}

.new_phone_part_six_img img {
  width: 100%;
  border-radius: 8px;
  display: block;
}

.new_phone_part_five_content {
  display: flex;
  justify-content: space-between;
  align-partlistcon: center;
  height: 300px;
}
.new_phone_part_five_left {
  width: 49%;
  height: 100%;
  border-radius: 8px;
}
.new_phone_part_five_left_img {
  width: 100%;
  height: 100%;
  padding: 5px 0;
}
.new_phone_part_five_right {
  width: 49%;
  height: 100%;
  border-radius: 8px;
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-partlistcon: center;
}
.new_phone_part_five_right_img {
  width: 100%;
  height: 50%;
  padding: 5px 0;
}
.new_phone_part_five_left_img img,
.new_phone_part_five_right_img img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
}
.el-carousel__container {
  height: 100% !important;
}

img {
  display: inline-block;
  height: auto;
  max-width: 100%;
}

.new_phone_part_four_img1:nth-of-type(3n + 1),
.new_phone_part_four_img1:nth-of-type(3n + 1) {
  width: 100%;
  padding: 0;
}

.new_phone_part_four_img1:nth-of-type(3n + 2),
.new_phone_part_four_img1:nth-of-type(3n + 3) {
  width: 50%;
  padding: 0;
}
.new_phone_part_five_img1:nth-of-type(4n + 1) {
  width: 100%;
  padding: 0;
}
.new_phone_part_five_img1:nth-of-type(4n + 2),
.new_phone_part_five_img1:nth-of-type(4n + 3),
.new_phone_part_five_img1:nth-of-type(4n + 4) {
  width: 33.33%;
  padding: 0;
}
.new_phone_part_six_img1:nth-of-type(5n + 1),
.new_phone_part_six_img1:nth-of-type(5n + 2) {
  width: 50%;
  padding: 0;
}
.new_phone_part_six_img1:nth-of-type(5n + 3),
.new_phone_part_six_img1:nth-of-type(5n + 4),
.new_phone_part_six_img1:nth-of-type(5n + 5) {
  width: 33.33%;
  padding: 0;
}

// 1+ 4
.new_phone_part_content .new_phone_part_eight_img:nth-of-type(5n + 1) {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}
.new_phone_part_content .new_phone_part_eight_img:nth-of-type(5n + 2),
.new_phone_part_content .new_phone_part_eight_img:nth-of-type(5n + 3),
.new_phone_part_content .new_phone_part_eight_img:nth-of-type(5n + 4),
.new_phone_part_content .new_phone_part_eight_img:nth-of-type(5n + 5) {
  width: 48%;
  height: auto;
  display: flex;
  justify-content: center;
}
// 1+4无边距
.new_phone_part_content
  .new_phone_part_eight_img_no_border:nth-of-type(5n + 1) {
  width: 100%;
  display: flex;
  justify-content: center;
}
.new_phone_part_content .new_phone_part_eight_img_no_border:nth-of-type(5n + 2),
.new_phone_part_content .new_phone_part_eight_img_no_border:nth-of-type(5n + 3),
.new_phone_part_content .new_phone_part_eight_img_no_border:nth-of-type(5n + 4),
.new_phone_part_content
  .new_phone_part_eight_img_no_border:nth-of-type(5n + 5) {
  width: 50%;
  height: auto;
  display: flex;
  justify-content: center;
}

// 2+ 4
.new_phone_part_content .new_phone_part_nine_img:nth-of-type(6n + 1),
.new_phone_part_content .new_phone_part_nine_img:nth-of-type(6n + 2) {
  width: 48.5%;
  display: flex;
  justify-content: center;
  margin-top: 8px;
  margin-bottom: 8px;
}

.new_phone_part_content .new_phone_part_nine_img:nth-of-type(1),
.new_phone_part_content .new_phone_part_nine_img:nth-of-type(2) {
  margin-top: 0;
}
.new_phone_part_content .new_phone_part_nine_img:nth-of-type(6n + 3),
.new_phone_part_content .new_phone_part_nine_img:nth-of-type(6n + 4),
.new_phone_part_content .new_phone_part_nine_img:nth-of-type(6n + 5),
.new_phone_part_content .new_phone_part_nine_img:nth-of-type(6n + 6) {
  width: 23%;
  height: auto;
  display: flex;
  justify-content: center;
}
// 2+4无边距
.new_phone_part_content .new_phone_part_nine_img_no_border:nth-of-type(6n + 1),
.new_phone_part_content .new_phone_part_nine_img_no_border:nth-of-type(6n + 2) {
  width: 50%;
  display: flex;
  justify-content: center;
}
.new_phone_part_content .new_phone_part_nine_img_no_border:nth-of-type(6n + 3),
.new_phone_part_content .new_phone_part_nine_img_no_border:nth-of-type(6n + 4),
.new_phone_part_content .new_phone_part_nine_img_no_border:nth-of-type(6n + 5),
.new_phone_part_content .new_phone_part_nine_img_no_border:nth-of-type(6n + 6) {
  width: 25%;
  height: auto;
  display: flex;
  justify-content: center;
}

.new_phone_part_ten_img {
  justify-content: space-between;
  > img {
    width: 160px;
  }
  > div {
    width: 160px;
    margin-left: auto;
    flex-direction: column;
    > img:nth-of-type(2) {
      margin-top: 10px;
    }
  }
}

.new_phone_part_ten_img_no_border {
  justify-content: space-between;
  > img {
    width: 50%;
  }
  > div {
    width: 50%;
    margin-left: auto;
    flex-direction: column;
    > img:nth-of-type(2) {
      margin-top: 20px;
    }
  }
}

.new_phone_part_99_img,
.new_phone_part_99_img_no_border {
  width: 48%;
}

.new_phone_part_11_bj {
  width: 100%;
  img {
    width: 100%;
  }
}
.new_phone_part_11_content {
  width: 93%;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 5px;
  margin: -20px auto 0 auto;
  .new_phone_part_11_item {
    width: 105px;
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    > img {
      width: 100%;
    }
    > span {
      font-size: 12px;
      font-weight: 400;
      color: #333333;
      margin-top: 5px;
    }
  }
}
</style>
